<script setup lang="ts">
  import { onMounted, ref } from 'vue';

  const show = ref(false);
  let renderCount = ref(0);

  onMounted(() => {
    show.value = true;
    renderCount.value = renderCount.value + 1;
    console.log(`Component mounted, render count: ${renderCount.value}`);
  });

  function handleMounted() {
    console.log('Next.js子应用已挂载');
  }

  function handleError(e) {
    console.error('子应用加载失败:', e.detail);
  }

  function handleDataChange(e) {
    console.log('来自子应用的数据：', e.detail.data);
  }
</script>
<!--4173-->
<!--5173-->
<template>
  <div>
    <micro-app
      name="test-next"
      url="http://localhost:3008/test-next"
      @error="handleError"
      @mounted="handleMounted"
      :data="{ show: 'value' }"
      @datachange="handleDataChange"
      ssr
      style="width: 100%; height: 100vh"
    />
    <micro-app
      router-mode="pure"
      iframe
      name="zhm-react"
      url="http://localhost:5173/zhm-react/"
      default-page="dashboard"
      @error="handleError"
      @mounted="handleMounted"
      :data="{ show: 'value' }"
      @datachange="handleDataChange"
    />
  </div>
</template>

<style scoped lang="less"></style>
